<template>
  <div class="login" :style="{height: wH+'px', backgroundImage:'url('+ bg +')'}">
    <cheader :pageIndex="2"></cheader>
    <div class="loginWrap">
      <h2>上海交通大学战役专题网站</h2>
      <ul>
        <li>
          <font-awesome-icon icon="user" class="icon"/>
          <span>用户名</span>
          <input type="text" v-model="userName">
        </li>
        <li>
          <font-awesome-icon icon="lock" class="icon"/>
          <span>密<i>密</i>码</span>
          <input type="password" v-model="pwd" autocomplete='off'>
        </li>
      </ul>
      <div class="errmsg">
        密码或用户名错误
      </div>
      <button @click="loginFun">登 录</button>
    </div>
  </div>
</template>
<script>
import cheader from '@/components/cheader/cheader'
export default {
  data () {
    return {
      wH: '',
      bg: require('./bg.jpg'),
      userName: '',
      pwd: ''
    }
  },
  created () {
    this.setBg()
    window.onresize = () => {
      this.setBg()
    }
  },
  components: {
    cheader
  },
  methods: {
    setBg () {
      let wH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      this.wH = wH
    },
    loginFun () {
      console.log(this.userName, this.pwd)
    }
  }
}
</script>
<style lang="scss" scoped>
  .login {
    min-height: 700px;
    position: relative;
    background: center no-repeat;
    background-size: cover;
    .bg {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .loginWrap {
      width: 400px;
      height: 300px;
      background-color: #fff;
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -150px;
      margin-left: 150px;
      box-sizing: border-box;
      h2 {
        font-size: 24px;
        color: #4a636f;
        font-weight: bold;
        text-align: center;
        margin-top: 42px;
        margin-bottom: 42px;
      }
      ul {
        li {
          margin-bottom: 22px;
          text-align: center;
          font-size: 0;
          .icon {
            color: #555;
            display: inline-block;
            vertical-align: top;
            margin-top: 7px;
            font-size: 16px;
            margin-right: 10px;
          }
          span {
            color: #555;
            display: inline-block;
            vertical-align: top;
            margin-top: 7px;
            font-size: 16px;
            margin-right: 10px;
            i {
              opacity: 0;
            }
          }
          input {
            font-size: 14px;
            width: 250px;
            height: 28px;
            background-color: #f4f4f4;
            border: 1px solid #e0e0e0;
            border-radius: 50px;
            box-sizing: border-box;
            padding: 0 10px;
            outline: none;
          }
        }
      }
      .errmsg {
        color: #f18282;
        font-size: 16px;
        text-align: center;
      }
      button {
        width: 132px;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        background-color: #83cde1;
        border-radius: 30px;
        color: #fff;
        border: 0 none;
        display: block;
        margin: 20px auto;
        cursor: pointer;
      }
    }
  }
</style>
